import { login, getUserInfo, getUserDetailById } from '@/api/user'
import { setToken, getToken } from '@/utils/auth'
// import { reject, resolve } from 'core-js/fn/promise'
export default {
  namespaced: true,
  // data(){return{响应式数据}}复用的时候直接写成对象 由于引用类型的特性
  // 各个组件之间恭喜data中的数据 组件一个发生改变另一个也会受影响
  // vuex中的模块也是可以进行服用的为了复用的时候互相不影响采用同样的函数执行
  state: () => ({
    token: getToken() || '',
    userInfo: {}
  }),
  mutations: {
    setToken(state, token) {
      // 存入vuex
      state.token = token
      // 存入本地
      setToken(token)
    },
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    }
  },
  actions: {
    asyncSetToken(ctx, data) {
      // 发送登录请求获取token然后调用muataion存入state中
      // 修改一下 返回promise对象的方法
      // 基础原理 在Promise连中 如果前一个.then方法中return了new Promise对象
      // 那么最后一个.then的回调 会等到new Promise对象状态发生变化之后才执行
      return new Promise((resolve, reject) => {
        login(data).then(res => {
          // 调用mutation函数
          ctx.commit('setToken', res.data)
          resolve()
          resolve(res.date)
        })
      })
    },
    asyncGetUserInfo(ctx) {
      return new Promise((resolve, reject) => {
        // 1.调用获取个人信息接口
        getUserInfo().then(res => {
          // 依赖res.data中的userId然后发送获取图片的请求
          getUserDetailById(res.data.userId).then(imgRes => {
            // 俩个接口的数据对象需要组合成一个大对象 然后统一存入state
            ctx.commit('setUserInfo', { ...res.data, ...imgRes.data })
            resolve()
          })
        })
      // 2.拿到数据之后通过调用mutation函数把信息存入state
      })
    }
  }
}

